<template>
  <div>
    <el-dialog
      append-to-body
      :visible.sync="visibleSync"
      :width="width"
      :close-on-click-modal="false"
      @closed="handleCancel"
    >
      <template slot="title">
        <div class="dialog_title">
          <div class="blueLine"></div>
          <div class="title">
            {{ title }}
          </div>
        </div>
      </template>
      <!-- 内容插槽 -->
      <slot></slot>

      <!-- 底部按钮插槽 -->
      <span slot="footer" class="dialog-footer">
        <slot name="footer">
          <!-- 默认按钮，如果没有插槽 -->
          <el-button @click="handleCancel">取消</el-button>
          <el-button type="primary" @click="handleConfirm">确认</el-button>
        </slot>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "DiymicDialog",
  props: {
    title: {
      type: String,
      default: "提示",
    },
    show: {
      type: Boolean,
      default: false,
    },
    width: {
      type: String,
      default: "600px",
    },
    closeOnClickModal: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    visibleSync: {
      get() {
        return this.show;
      },
      set(val) {
        this.$emit("update:show", val); // 同步 show 到父组件
      },
    },
  },
  methods: {
    handleCancel() {
      this.visibleSync = false; // 自动触发 setter -> emit 更新父组件的 show
      this.$emit("cancel");
    },
    handleConfirm() {
      this.$emit("confirm");
    },
  },
};
</script>

<style lang="scss" scoped>
.dialog_title {
  display: flex;
  font-weight: 700;

  .blueLine {
    color: #1065ff;
    background: #1065ff;
    width: 5px;
    height: auto;
    border-radius: 3px;
    margin-right: 10px;
  }
  .title {
    color: #000;
  }
}
</style>
